import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import { Icon } from 'antd';
import footer from '../css/Footer.module.css'
class Footer extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            display_name: 'none',
            display_name1: 'none',
            display_name2: 'none',
            display_name3: 'none',
            display_name4: 'none',
        }
    }
    //列表一
    display_name() {
        if (this.state.display_name === 'none') {
            this.setState({
                display_name: 'block',
            })
        } else if (this.state.display_name === 'block') {
            this.setState({
                display_name: 'none',
            })

        }
    }
    //列表二
    display_name1() {
        if (this.state.display_name1 === 'none') {
            this.setState({
                display_name1: 'block',
            })
        } else if (this.state.display_name1 === 'block') {
            this.setState({
                display_name1: 'none',
            })

        }
    }
    //列表三
    display_name2() {
        if (this.state.display_name2 === 'none') {
            this.setState({
                display_name2: 'block',
            })
        } else if (this.state.display_name2 === 'block') {
            this.setState({
                display_name2: 'none',
            })

        }
    }
    //列表四
    display_name3() {
        if (this.state.display_name3 === 'none') {
            this.setState({
                display_name3: 'block',
            })
        } else if (this.state.display_name3 === 'block') {
            this.setState({
                display_name3: 'none',
            })

        }
    }
    //列表二五
    display_name4() {
        if (this.state.display_name4 === 'none') {
            this.setState({
                display_name4: 'block',
            })
        } else if (this.state.display_name4 === 'block') {
            this.setState({
                display_name4: 'none',
            })

        }
    }
    render() {
        return (
            <div className={footer.div}>
                <div className={footer.div1}>
                    <div className={footer.div1_1}>
                        <h2>以下方式任选一种，就能揭开神秘优惠价，享受精选住宿推出的特价房。</h2>
                        <div className={footer.icon}>
                            <NavLink className={footer.emil}>
                                <Icon type="mail" theme="filled" className={footer.emil_1} />
                                <h3>电子邮件</h3>
                                <p>订阅最新促销邮件</p>
                            </NavLink>
                            <NavLink className={footer.moblie}>
                                <Icon type="mobile" theme="filled" className={footer.moblie_1} />
                                <h3>Hotels.com 好订网 App</h3>
                                <p>下载 App，便捷移动订房</p>
                            </NavLink>
                            <NavLink className={footer.mail}>
                                <Icon type="home" theme="filled" className={footer.mail_1} />
                                <h3>Hotels.com™ 好订网奖励</h3>
                                <p>马上加入！累积 10 晚，即享受 1 晚免费*住宿！</p>
                            </NavLink>
                        </div>
                    </div>
                </div>
                <div className={footer.div2}>
                    <div className={footer.div2_1}>
                        <div className={footer.nav_list}>
                            <ul>
                                <li>
                                    <h2 onClick={this.display_name.bind(this)}>热门目的地<Icon type="down" /></h2>
                                    <ul style={{ display: this.state.display_name }}>
                                        <li><NavLink>吉隆坡酒店预订</NavLink></li>
                                        <li><NavLink>纽约酒店预订</NavLink></li>
                                        <li><NavLink>香港酒店预订</NavLink></li>
                                        <li><NavLink>首尔酒店预订</NavLink></li>
                                        <li><NavLink>曼谷酒店预订</NavLink></li>
                                        <li><NavLink>台北酒店预订</NavLink></li>
                                        <li><NavLink>澳门酒店预订</NavLink></li>
                                        <li><NavLink>洛杉矶酒店预订</NavLink></li>
                                        <li><NavLink>旧金山酒店预订</NavLink></li>
                                        <li><NavLink>温哥华酒店预订</NavLink></li>
                                        <li><NavLink>夏威夷(大岛)酒店预订</NavLink></li>
                                        <li><NavLink>迪拜酒店预订</NavLink></li>
                                        <li><NavLink>罗马酒店预订</NavLink></li>
                                        <li><NavLink>巴厘岛酒店预订</NavLink></li>
                                        <li><NavLink>马尔代夫(全区)酒店预订</NavLink></li>
                                        <li><NavLink>斐济 (全部)酒店预订</NavLink></li>
                                        <li><NavLink>清迈酒店预订</NavLink></li>
                                        <li><NavLink>上海酒店预订</NavLink></li>
                                        <li><NavLink>北京酒店预订</NavLink></li>
                                        <li><NavLink>广州酒店预订</NavLink></li>
                                        <li><NavLink>丽江酒店预订</NavLink></li>
                                        <li><NavLink>天津酒店预订</NavLink></li>
                                        <li><NavLink>重庆酒店预订</NavLink></li>
                                        <li><NavLink>三亚酒店预订</NavLink></li>
                                    </ul>
                                </li>
                                <li>
                                    <h2 onClick={this.display_name1.bind(this)}>热门国家和地区<Icon type="down" /></h2>
                                    <ul style={{ display: this.state.display_name1 }}>
                                        <li><NavLink>美国酒店</NavLink></li>
                                        <li><NavLink>中国酒店</NavLink></li>
                                        <li><NavLink>泰国酒店</NavLink></li>
                                        <li><NavLink>日本酒店</NavLink></li>
                                        <li><NavLink>台湾酒店</NavLink></li>
                                        <li><NavLink>马来西亚酒店</NavLink></li>
                                        <li><NavLink>韩国酒店</NavLink></li>
                                        <li><NavLink>香港酒店</NavLink></li>
                                        <li><NavLink>新加坡酒店</NavLink></li>
                                        <li><NavLink>澳大利亚酒店</NavLink></li>
                                    </ul>
                                </li>
                                <li>
                                    <h2 onClick={this.display_name2.bind(this)}>支持及常见问题<Icon type="down" /></h2>
                                    <ul style={{ display: this.state.display_name2 }}>
                                        <li><NavLink>您的订单</NavLink></li>
                                        <li><NavLink>常见问题解决</NavLink></li>
                                        <li><NavLink>联系我们</NavLink></li>
                                        <li><NavLink>网站反馈</NavLink></li>
                                        <li><NavLink>点评住宿</NavLink></li>
                                    </ul>
                                </li>
                                <li>
                                    <h2 onClick={this.display_name3.bind(this)}>供应商、关联公司和媒体链接<Icon type="down" /></h2>
                                    <ul style={{ display: this.state.display_name3 }}>
                                        <li><NavLink>加入 Hotels.com 好订网联盟</NavLink></li>
                                        <li><NavLink>广告服务</NavLink></li>
                                        <li><NavLink>代理合作</NavLink></li>
                                    </ul>
                                </li>
                                <li>
                                    <h2 onClick={this.display_name4.bind(this)}>使用条款和隐私政策<Icon type="down" /></h2>
                                    <ul style={{ display: this.state.display_name4 }}>
                                        <li><NavLink>条款与条件</NavLink></li>
                                        <li><NavLink>隐私</NavLink></li>
                                        <li><NavLink>Cookie 策略</NavLink></li>
                                    </ul>
                                </li>
                                <li><h2><NavLink>网站反馈</NavLink></h2></li>
                                <li><h2><NavLink>关于我们</NavLink></h2></li>
                                <li><h2><NavLink>发布您的住宿</NavLink></h2></li>
                                <li><h2><NavLink>工作机会</NavLink></h2></li>
                            </ul>
                            <ul className={footer.lx}>
                                <li><NavLink className={footer.a}>旅行指南</NavLink></li>
                                <li><NavLink className={footer.a}>50 大热门城市</NavLink></li>
                                <li><NavLink className={footer.a}>所有国家/地区</NavLink></li>
                                <li><NavLink className={footer.a}>站点导航</NavLink></li>
                            </ul>
                        </div>
                        <br />
                        <div className={footer.nav_end}>
                            <p>© 2019 Hotels.com, L.P. 保留所有权利。</p>
                            <p>Hotels.com 好订网及 Hotels.com 好订网徽标是 Hotels.com, L.P. 在美国和/或其他国家/地区的商标或注册商标。所有其他商标均归其各自所有者所有。</p>
                            <p>京ICP备12028618号</p>
                            <p>* 了解更多有关Hotels.com™ 好订网奖励的信息</p>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default Footer